<script setup lang='ts' name="select-goods">
import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive, ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    data?: any

}>(), {
    data: () => [],

})
const emits = defineEmits(['changeList'])
const show = defineModel<boolean>('show', { required: true })
const list = defineModel('list')
const { data } = toRefs(props)
const tableRef = ref()
const gridOptions = reactive<any>({
    align: 'center',
    border: true,
    checkboxConfig: {
        range: false,
        reserve: true,
    },
    columnConfig: {
        resizable: true,
    },
    columns: [
        { type: 'checkbox', width: 50 },
        { field: 'productName', title: '商品' },
        { field: 'model', title: '型号' },
        { field: 'brand', title: '品牌' },
        { field: 'attribute', title: '规格属性' },
        { field: 'unit', title: '单位' },
    ],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 350,
    keepSource: true,
    loading: false,
    rowConfig: {
        keyField: 'skuId',
    },

})

const gridEvents: any = {
    toolbarButtonClick({ code }) {
        switch (code) {
            case 'add':
                break
            case 'del':
                break
        }
    },
}
const selectList = ref([])
const selectChangeEvent: any = ({ records }) => {
    selectList.value = cloneDeep(records)
}
function cancel() {
    show.value = false
}

const productName = ref('')
function filterTableList() {
    if (productName.value) {
        const result = data?.value.filter((item: any) => {
            return item.productName.includes(productName.value) || item.attribute.includes(productName.value)
        })
        gridOptions.data = cloneDeep(result) ?? []
    }
    else {
        gridOptions.data = cloneDeep(data?.value) ?? []
    }
}
function reset() {
    productName.value = ''
}

function submit() {
    show.value = false
    emits('changeList', selectList.value)
}
function changeSelect(val: any, bool: boolean) {
    const $table = tableRef.value?.tableInstance
    if ($table && val) {
        // 先置空
        $table.clearCheckboxRow()
        // 在改变选中的数据
        $table.setCheckboxRow(val, bool)
    }
}
watchEffect(() => {
    if (data.value)
        gridOptions.data = cloneDeep(data.value)
})

watch(() => list.value, (nval) => {
    changeSelect(nval, true)
}, {
    deep: true,
    immediate: true,
})
</script>

<template>
    <el-dialog v-model="show"
               :close-on-click-modal="false"
               title="选择商品"
               @close="cancel"
               @closed="reset"
    >
        <div class="search-row">
            <el-input v-model="productName"
                      style="width: 400px"
                      placeholder="请输入产品名称或属性值"
                      clearable
            />

            <el-button type="primary"
                       @click="filterTableList"
            >
                搜索
            </el-button>
        </div>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-on="gridEvents"
                     @checkbox-change="selectChangeEvent"
        >
            <template #code="{ row }">
                <span style="color: #99c3fb;">{{ row.code }}</span>
            </template>
        </SearchTable>

        <div style="text-align: center;margin-top: 20px;">
            <el-button type="primary"
                       @click="submit"
            >
                确定
            </el-button>
        </div>
    </el-dialog>
</template>

<style lang="less" scoped>
.search-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
</style>
